// 显示ID类型选择弹框
import { defineComponent, onMounted, PropType, computed, ref, watch } from "vue";
import { Search } from '@element-plus/icons-vue'
import './index.scss'

const MultipleSelectDialog = defineComponent({
  name: 'MultipleSelectDialog',
  props: {
    modelVal: {
      type: Array as PropType<any[]>,
      default: []
    },
    dataList: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: "选择框",
    }
  },
  emits: ['update:modelVal'],
  setup: (props, { emit }) => {

    const dialogVisible = ref(false);
    const checkedGoods: any = ref([]);
    const renderGoods: any = ref([]);
    // 删除单项
    const delCurrentCheckedGood = (data: any) => {
      checkedGoods.value = checkedGoods.value.filter((item: any) => {
        return item.value !== data.value
      })
    }
    // 清空
    const delAll = () => {
      checkedGoods.value = [];
    }

    // 搜索框
    const searchValue = ref('');
    watch(searchValue, () => {
      if (searchValue.value == "") {
        renderGoods.value = props.dataList
      } else {
        renderGoods.value = props.dataList.filter((item: any) => {
          return item.label.indexOf(searchValue.value) != -1;
        })
      }
    })

    // 确定
    const doSelect = () => {
      let checkIds = checkedGoods.value.map((item: any) => item.value);
      emit('update:modelVal', checkIds);
      dialogVisible.value = false;
    }

    // 取消
    const cancleSelect = () => {
      dialogVisible.value = false;
    }

    watch(() => props.dataList.length, (val) => {
      if (val > 0) {
        renderGoods.value = props.dataList;
      }
    }, { immediate: true });

    watch(() => props.modelVal.length, (val) => {
      checkedGoods.value = [];
      if (val > 0) {
        props.modelVal.forEach((item: any) => {
          const obj = props.dataList.find((o: any) => {
            return o.value === item;
          })
          if (obj) {
            checkedGoods.value.push(obj);
          }
        })
      }
    }, { immediate: true });

    return () => {
      return (
        <>
          <div class="multiple-select-show" onClick={() => {
            dialogVisible.value = true;
          }}>
            {checkedGoods.value.length == 0 && (<span class="placeholder-text">请选择</span>)}
            {!dialogVisible.value && checkedGoods.value.length > 0 && (<span class="select-label">已选{checkedGoods.value.length}项</span>)}
            {!dialogVisible.value && checkedGoods.value.length > 0 && checkedGoods.value.map((item: any, index: any) => {
              if (index < 2) {
                return (<el-tag class="select-tag" type="info" closable>{item.label}</el-tag>);
              }
            })}
          </div>
          <el-dialog
            v-model={dialogVisible.value}
            width={590}
            title={props.title}
            custom-class="multiple-select-dialog"
            v-slots={{
              footer: () => {
                return (
                  <span class="dialog-footer">
                    <el-button onClick={cancleSelect}>取消</el-button>
                    <el-button type="primary" onClick={doSelect}>确定</el-button>
                  </span>
                )
              }
            }}
          >
            <div class="multiple-select">
              <div class="left-cont">
                <el-input
                  placeholder="请输入名称搜索"
                  style={{ paddingRight: '18px' }}
                  suffix-icon={Search}
                  v-model={searchValue.value} />
                <div class="checkbox-div">
                  <el-checkbox-group
                    v-model={checkedGoods.value}
                  >
                    {
                      renderGoods.value.map((item: any) => {
                        return <el-checkbox label={item} size="large">{item.label}</el-checkbox>
                      })
                    }
                  </el-checkbox-group>
                </div>
              </div>
              <div class="right-cont">
                <div class="header-cont">
                  <div>已选择（<span>{checkedGoods.value.length}</span>）</div>
                  <div class="btn-empty" onClick={() => { delAll() }}>清空</div>
                </div>
                {
                  checkedGoods.value.length > 0 && <div class="main-cont" >
                    {
                      checkedGoods.value.map((item: any) => (
                        <div class="checked-item" >
                          <div class="item-name">{item.label}</div>
                          <div class="btn" onClick={() => { delCurrentCheckedGood(item) }}>删除</div>
                        </div>
                      ))
                    }
                  </div>
                }
                {
                  checkedGoods.value.length === 0 && <div class="main-cont-empty">
                    <div class="tips">请从左侧选择</div>
                  </div>
                }
              </div>
            </div>
          </el-dialog>
        </>
      )
    }
  }
})

export default MultipleSelectDialog